<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="">
        姓名： <input class="input-name" type="text" value="张三"><br>
        爱好： 
        <!-- 数据词典 一般不会直接用中文 -->
        <!-- onchange 是当表单内容发送变化的时候触发 -->
        <!-- 思考： likesChange(this) => this.checked  是变化前的状态还是变化好的状态？ -->
        <input class="like-checkbox" onchange="likesChange()" name="like" type="checkbox" value="1"> 篮球
        <input class="like-checkbox" onchange="likesChange()" name="like" type="checkbox" value="2"> 足球
        <br>
        工作经验： 
            <select class="exp-select" name="exp" id="">
                <option value="1">无</option>
                <option value="2">1-3年</option>
                <option value="3">3-5年</option>
            </select>
        <br>
        性别： 
            <input name="sex" type="radio" checked class="sex-input" value="0"> 男
            <input name="sex" type="radio" class="sex-input" value="1"> 女
    </form>

    <script>
        var inputEl = document.querySelector('.input-name');
        inputEl.value = '李四';
        var checkboxArr = document.querySelectorAll('.like-checkbox');
        // 获取select
        var selectEl = document.querySelector('.exp-select');
        // 获取所有的option
        var optionArr = selectEl.children;
        // 对于多选框 是通过控制checked属性来确定是否选中的
        checkboxArr[0].checked = true;
        // 假设第二个被选中
        optionArr[1].selected = true;
        // console.log('selectEl.value',selectEl.value);
        function likesChange(){
            var likeValues = getLikeInputValues();
            console.log(likeValues);
        }

        /**
        * 获取like多选框的value
        **/
        function getLikeInputValues(){
            // 喜欢的结果集合
            var likeInputValues = [];
            for(var i = 0 ; i < checkboxArr.length ; i ++){
                if(checkboxArr[i].checked){
                    // likeInputValue = checkboxArr[i].value;
                    likeInputValues.push(checkboxArr[i].value);
                }
            }
            console.log('like输入框的值为:',likeInputValues);
            return likeInputValues;
        }
        
    </script>
</body>
</html>